<template>
  <view>
    <su-fixed bottom placeholder>
      <view class="coach-tabbar-box">
        <view class="tabbar-left ss-flex ss-col-center">
          <!-- 收藏 -->
          <view class="action-btn ss-flex ss-flex-col ss-col-center ss-row-center" @tap="onFavorite">
            <text class="sicon-star" :class="{ 'favorited': modelValue.favorite }"></text>
            <text class="action-title">{{ modelValue.favorite ? '已收藏' : '收藏' }}</text>
          </view>
          
          <!-- 分享 -->
          <view class="action-btn ss-flex ss-flex-col ss-col-center ss-row-center" @tap="onShare">
            <text class="sicon-share"></text>
            <text class="action-title">分享</text>
          </view>
        </view>
        
        <view class="tabbar-right ss-flex-1 ss-flex ss-col-center ss-p-l-20">
          <slot />
        </view>
      </view>
    </su-fixed>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import sheep from '@/sheep';
  import FavoriteApi from '@/sheep/api/product/favorite';

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  });

  const emit = defineEmits(['update:modelValue']);

  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 收藏/取消收藏
  async function onFavorite() {
    if (!isLogin.value) {
      sheep.$helper.toast('请先登录');
      return;
    }

    const isFavorited = props.modelValue.favorite;
    let result;
    
    if (isFavorited) {
      result = await FavoriteApi.deleteFavorite(props.modelValue.id);
    } else {
      result = await FavoriteApi.createFavorite(props.modelValue.id);
    }

    if (result.code === 0) {
      const updatedInfo = { ...props.modelValue };
      updatedInfo.favorite = !isFavorited;
      emit('update:modelValue', updatedInfo);
      
      uni.showToast({
        title: isFavorited ? '取消收藏' : '收藏成功',
        icon: 'success',
      });
    }
  }

  // 分享
  function onShare() {
    sheep.$platform.share.show();
  }
</script>

<style lang="scss" scoped>
  .coach-tabbar-box {
    display: flex;
    align-items: center;
    height: 100rpx;
    background: #ffffff;
    border-top: 1rpx solid #f0f0f0;
    padding: 0 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .tabbar-left {
    .action-btn {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
      
      .sicon-star,
      .sicon-share {
        font-size: 36rpx;
        color: #666666;
        margin-bottom: 4rpx;
        transition: all 0.3s ease;
        
        &.favorited {
          color: #ff6b35;
        }
      }
      
      .action-title {
        font-size: 20rpx;
        color: #999999;
        line-height: 1;
      }
      
      &:active {
        transform: scale(0.95);
      }
    }
  }

  .tabbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
